<template>
 <div class="my-tag">
  <input 
  class="input"
   type="text"
    placeholder="输入标签"
    v-if="edit"
    v-focus
    @blur="edit=false"
    @keydown.enter="confirm"
    v-model.trim="tag">
<div @dblclick="showEdit" v-else class="text">{{value}}</div>
 </div>
</template>
<script> 
export default {
  props: {
    value:{
      type:String,
      required:true
    }
  },
  //这个是自定义指令
  directives: {
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
 data() {
 return {
  //是否处于编辑状态
  edit:false,
  tag:''
 }
 },
 methods:{
  showEdit(){
    //显示编辑框
    this.edit=true
    //数据回显
    this.tag=this.value
  },
  confirm(){
    if(this.tag ===''){
      this.tag='暂无'
    }
    //将用户传递的内容传递给父组件
    this.$emit('input',this.tag)
    //让文本框隐藏  
    this.edit=false
  }
 },
}
</script>
<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>
